<template>
    <div class="main-container">
        <div v-for="houseInformation in houseInformations">
            <div style="width: 100%; border: 0; font-size: 12px; text-align: center; font-weight: bold;">
                <h1 style="line-height: 8px;" class="hei-color">住房信息查询证明验证结果</h1>
            </div>
            <p class="zfzm-p">编号：<el-input v-model="houseInformation.code" placeholder="" :value="houseInformation.code"></el-input><!-- <input type="text" id="bh" value="ZZ20210419590531">--></p> 
            <p class="zfzm-p">查询人：<el-input v-model="houseInformation.name" placeholder="" :value="houseInformation.name"></el-input><!-- <input type="text" id="SQRMC" value="程棋棋">--></p> 
            <p class="zfzm-p">身份证号：<el-input v-model="houseInformation.sfz" placeholder="" :value="houseInformation.sfz"></el-input><!-- <input type="text" id="SQRSFZH" value="32022219811002037X"> --></p>
            <p class="zfzm-p">出具时间：<el-input v-model="houseInformation.proveDatetime" placeholder="" :value="houseInformation.proveDatetime"></el-input><!-- <input type="text" id="CJSJ" value="2021-04-02 16:03:45"> --><span style="color: red;">(有效期为出具之日起5个工作日)</span></p>
            <p class="zfzm-p">住房信息：</p>
        <!-- <el-card v-for="houseInformation in houseInformations" class="box-card" style="height: 100%;" > -->
        <!-- <div slot="header" class="clearfix">
            <span><el-tag>{{houseInformation.name}}</el-tag> 的住房信息查询证明验证结果</span> 
            <div class="zfzm-main-title" style="color: #000;">住房信息查询证明验证结果</div>
          </div>-->
          <!-- <div class="zfzm-main-title" style="color: #000;">住房信息查询证明验证结果</div> -->
        <!-- 
         <el-form ref="form" :model="form" label-width="80px">
           <el-form-item label="编号:" style="color: #000;">
                <el-tag type="success">{{houseInformation.code}}</el-tag> 
               <div class="show-label">{{houseInformation.code}}</div>
           </el-form-item>
           <el-form-item label="查询人:">
              <el-tag type="success">{{houseInformation.name}}</el-tag>
               <div class="show-label">{{houseInformation.name}}</div>
           </el-form-item>
           <el-form-item label="身份证号:">
               <el-tag type="success"></el-tag>
               <div class="show-label">{{houseInformation.sfz}}</div>
           </el-form-item>
           <el-form-item label="出具时间:">
               <el-tag type="success" ></el-tag>
               <div class="show-label" style="margin-right: 10px;">{{houseInformation.proveDatetime}}</div>
               <el-link type="danger" :underline="false" style="color: red;">(有效期为出具之日起5个工作日)</el-link>
           </el-form-item>
           <el-form-item label="住房信息">
               <el-table
                   :data="houseInformation.houseInformationDetails"
                   border
                   style="width: 100%;">
                   <el-table-column prop="housePosition" label="房屋坐落" min-width="20%" width="100px" align="center"></el-table-column>
                   <el-table-column prop="registerDatetime" label="登记日期" min-width="20%" width="240px" align="center"></el-table-column>
                   <el-table-column prop="architectureArea" label="建筑面积" min-width="20%" width="240px" align="center"></el-table-column>
                   <el-table-column prop="recordNumber" label="权证号/备案号" min-width="20%" width="240px" align="center"></el-table-column>
                   <el-table-column prop="state" label="登记状况" min-width="10%" width="200px" align="center"></el-table-column>
                   <el-table-column prop="type" label="登记类型" min-width="10%" width="200px" align="center"></el-table-column>
                 </el-table> 
           </el-form-item>-->
            <table id="table" style="width: 100%; height: 100%; text-align: center;" border="1" cellspacing="0" cellpadding="0">
                    <tbody>
                        <tr>
                            <th style="text-align: center; width: 22%;">
                                房屋坐落
                            </th>
                            <th style="text-align: center; width: 15.5%;">
                                登记状况
                            </th>
                            <th style="text-align: center; width: 15%;">
                                登记日期
                            </th>
                            <th style="text-align: center; width: 15%;">
                                建筑面积
                            </th>
                            <th width="100px" style="text-align: center; width: 17.5%;">
                                权证号/备案号
                            </th>
                            <th style="text-align: center; width: 15%;">
                                登记类型
                            </th>
                        </tr>
                        <tr v-for="houseInformationDetail in houseInformation.houseInformationDetails">
                            <td style="text-align: center; width: 22%;">
                                {{houseInformationDetail.housePosition}}
                            </td>
                            <td style="text-align: center; width: 15.5%;">
                                {{houseInformationDetail.state}}
                            </td>
                            <td style="text-align: center; width: 15%;">
                                {{houseInformationDetail.registerDatetime}}
                            </td>
                            <td style="text-align: center; width: 15%;">
                                {{houseInformationDetail.architectureArea}}
                            </td>
                            <td width="100px" style="text-align: center; width: 17.5%;">
                                {{houseInformationDetail.recordNumber}}
                            </td>
                            <td style="text-align: center; width: 15%;">
                                {{houseInformationDetail.type}}
                            </td>
                        </tr>
                    </tbody>
                    
            </table>
            <div style="width: 100%;">
                        <p style="color: red; text-align: right;">本平台数据未经允许不得转载，转载时必须注明数据来源。</p>
                    </div>
                    <div style="width: 100%;">
                                <p style="text-align: right;">技术支持：无锡市不动产登记中心&nbsp;&nbsp;信息部</p>
                            </div>
            <!-- <el-table
                :data="houseInformation.houseInformationDetails"
                border
                style="width: 100%;">
                <el-table-column prop="housePosition" label="房屋坐落" min-width="20%" align="center"></el-table-column>
                <el-table-column prop="registerDatetime" label="登记日期"  min-width="20%" align="center"></el-table-column>
                <el-table-column prop="architectureArea" label="建筑面积" min-width="20%"  align="center"></el-table-column>
                <el-table-column prop="recordNumber" label="权证号/备案号" min-width="20%"  align="center"></el-table-column>
                <el-table-column prop="state" label="登记状况" min-width="20%"  align="center"></el-table-column>
                <el-table-column prop="type" label="登记类型" min-width="20%"  align="center"></el-table-column>
              </el-table> -->
          <!-- </el-form> -->
       <!-- </el-card> -->
       </div>
    </div>
</template>

<script>
import { viewHouseInformationArray } from '@/api/house/index'
export default {
    data() {
        return {
            form:{},
            queryParams:undefined,
            houseInformations:[]
        }
    },
    created() {
        const query = this.$route.query
        this.queryParams = query
		console.log('======')
    },
    mounted() {
        this.view()
    },
    methods: {
        view() {
            const { code, name, sfz } = this.queryParams
            const isVague = true
            viewHouseInformationArray({code, name, sfz, isVague}).then(res =>{
				let datas = res.data
				for(let data of datas){
					if(data.proveDatetime){
						data.proveDatetime = data.proveDatetime.replace(/T/g," ")
					}
				}
                this.houseInformations = datas
                console.log("viewHouseInformationArray:" + JSON.stringify(res))
            }).catch(()=>{

            })
        }
    }
}
</script>
<style scoped lang="scss">
    ::v-deep .hei-color {
        color: #000;
    }
    .zfzm-p {
        min-height: 18px;
        line-height: 18px;
    }
    .main-container {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 8px;
        color: #000 !important;
    }
    .zfzm-main-title {
        width: 100%;
        border: 0;
        text-align: center;
        font-weight: bold;
        font-size: 1.8em;
        margin-top: -6px;
    }
    .zfzm-show-value {
        color: -internal-light-dark(black, white);
    }
    ::v-deep .el-form-item {
        color: #000 !important;
    }
    ::v-deep .el-form-item label {
        color: #000;
    }
    ::v-deep .el-table table {
        border-color: #000;
        border-top: 1px solid;
    }
    ::v-deep .el-table table tbody tr {
        color: #000 !important;
    }
    ::v-deep .el-input {
        width: auto !important;
        height: 21px;
    }
    ::v-deep .el-input input {
        border-top-style: none;
        border-bottom-style: none;
        border-left-style: none;
        border-right-style: none;
        text-align: center;
        width: 174px !important;
        height: 21px;
        line-height: 21px;
        font-size: 400 13.3333px;
        color: #000;
    }
</style>
